<template>
  <div id="selectById">
    <!--操作按钮-->
    <el-form :inline="true" class="demo-form-inline center" >
      <el-row :gutter="18">
        <el-col :span="3"><el-button icon="el-icon-refresh" type="success" plain onclick="history.go(-1)">返回</el-button></el-col>
      </el-row>
    </el-form>
    <el-form :inline="true" :model="form"  class="demo-from-inline" >
      <router-link>返回<i class="el-icon-thumb"></i></router-link>
      <el-form-item label="用户名称">
        <el-input type="text" :value="form.userName" readonly></el-input>
      </el-form-item>
      <br>
      <el-form-item label="用户账号">
        <el-input type="text" :value="form.userAccount" readonly></el-input>
      </el-form-item>
      <br>
      <el-form-item label="头像">
        <img :src="form.userImage" v-if="form.userImage!=null"  width="12%">
        <img src="http://localhost:10002/c9374734-9353-49ee-a3a1-c333171549de.jpg" v-else-if="form.userImage==null" width="12%">
      </el-form-item>
      <br>
      <el-form-item label="手机号码">
        <el-input type="text" :value="form.userPhone" readonly></el-input>
      </el-form-item>
      <br>
      <!-- 真实姓名 -->
      <el-form-item label="真实姓名">
        <el-input type="text" :value="form.realName" readonly></el-input>
      </el-form-item>

      <!-- 性别 -->
      <el-form-item label="性别">
        <el-input type="text" :value="form.sex === '0' ? '男' : '女'" readonly></el-input>
      </el-form-item>

      <!-- 出生日期 -->
      <el-form-item label="生日">
        <el-input type="text" :value="form.birth | formatDate" readonly></el-input>
      </el-form-item>

      <!-- 省份 -->
      <el-form-item label="省份">
        <el-input type="text" :value="form.userProvince" readonly></el-input>
      </el-form-item>

      <!-- 市 -->
      <el-form-item label="市">
        <el-input type="text" :value="form.userCity" readonly></el-input>
      </el-form-item>

      <!-- 用户地址 -->
      <el-form-item label="用户地址">
        <el-input type="text" :value="form.userAddr" readonly></el-input>
      </el-form-item>

      <!-- 身份证 -->
      <el-form-item label="身份证">
        <el-input type="text" :value="form.userCard" readonly></el-input>
      </el-form-item>

      <!-- 用户余额 -->
      <el-form-item label="用户余额">
        <el-input type="text" :value="form.userBalance" readonly></el-input>
      </el-form-item>

      <!-- 银行卡号 -->
      <el-form-item label="银行卡号">
        <el-input type="text" :value="form.userBankCard" readonly></el-input>
      </el-form-item>

      <!-- 是否成为商户 -->
      <el-form-item label="是否是商户">
        <el-input type="text" :value="form.userMerchant === 1 ? '是' : '不是'" readonly></el-input>
      </el-form-item>

      <!-- 是否成为供应商 -->
      <el-form-item label="是否是供应商">
        <el-input type="text" :value="form.userSupplier === 1 ? '是' : '不是'" readonly></el-input>
      </el-form-item>

      <!-- 用户状态 -->
      <el-form-item label="用户状态">
        <el-input type="text" :value="form.userStatus === 0 ? '未注销' : '已注销'" readonly></el-input>
      </el-form-item>

      <!-- 创建时间 -->
      <el-form-item label="创建时间">
        <el-input type="text" :value="form.createTime | formatDate" readonly></el-input>
      </el-form-item>
        <!-- 更新时间 -->
        <el-form-item label="更新时间">
          <el-input type="text" :value="form.updateTime | formatDate" readonly></el-input>
        </el-form-item>
    </el-form>
  </div>

</template>

<script>
export default  {
  data(){
    return {
        form:{}
    }
  },
  filters: {
    formatDate: function(value) {
      if (!value) return '';
      return new Date(value).toLocaleDateString();
    }
  },
  created() {
    this.get()
  },
  methods: {
    async get() {
      try {
        const { data: res } = await this.$http.post(`/customer/getOne?id=` + this.$route.query.index);
        console.log(res);
        this.form = res;
      } catch (error) {
        console.error('There was an error!', error);
      }
    }
  }
}
</script>

<style scoped>

</style>